<!-- 💥 这里是一次性加载 LayoutComponents -->
<template>
	<component :is="LayoutComponents[themeConfig.layout]" />
	<ThemeDrawer />
</template>

<script setup lang="ts" name="layout">
import { computed } from "vue";
import { GlobalStore } from "@/stores";
import ThemeDrawer from "./components/ThemeDrawer/index.vue";
import LayoutVertical from "./LayoutVertical/index.vue";
import LayoutClassic from "./LayoutClassic/index.vue";
import LayoutTransverse from "./LayoutTransverse/index.vue";
import LayoutColumns from "./LayoutColumns/index.vue";
import LayoutThree from "./LayoutThree/index.vue";

const LayoutComponents: { [key: string]: any } = {
	vertical: LayoutVertical,
	classic: LayoutClassic,
	transverse: LayoutTransverse,
	columns: LayoutColumns,
	three: LayoutThree
};

const globalStore = GlobalStore();
const themeConfig = computed(() => globalStore.themeConfig);
const miniBarStatus = ref(globalStore.themeConfig.isCollapse ? "none" : "block");
watchEffect(() => {
	miniBarStatus.value = globalStore.themeConfig.isCollapse ? "none" : "block";
});
</script>

<style scoped lang="scss">
:deep(.mini-bar) {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 39px;
	font-weight: bold;
	border-bottom: 1px solid #eeeeee;
	.el-icon {
		margin-right: 6px;
	}
	.mini-bar-text {
		display: v-bind(miniBarStatus);
	}
}
.layout {
	min-width: 760px;
}
</style>
